<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>doh.robot ColorPalette Test</title>

		<style>
			@import "../../../util/doh/robot/robot.css";
		</style>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			djConfig="isDebug: true"></script>

		<script type="text/javascript">
			dojo.require("dijit.dijit"); // optimize: load dijit layer
			dojo.require("dijit.robotx");

			dojo.addOnLoad(function(){
				doh.robot.initRobot('../test_ColorPalette.html');

				var big, small, prog;

				// log of calls to onChange handler
				var changes = [];

				doh.register("dijit.ColorPalette tests", [
					{
						name: "initial conditions",
						setUp: function(){

							// refs to ColorPalette widgets
					    	big = dijit.byId("big");
					    	small = dijit.byId("small");
					    	prog = dijit.byId("prog");

					    	// setup onChange handler to monitor onChange calls
							dojo.connect(big, 'onChange', function(val){
								console.log('onchange w/value: ', val);
								changes.push(val);
							});
						},
						runTest: function(){
							doh.f(big.attr('value'), "no value for big");
							doh.f(small.attr('value'), "no value for small");
							doh.f(prog.attr('value'), "no value for prog");
						}
					},
					
					// TODO: when attr() is implemented as a setter, add tests like big.attr("value", "#ffc0cb")

					{
						name: "focus",
						timeout: 10000,
						runTest: function(){
							var d = new doh.Deferred();

							big.focus();

							doh.robot.sequence(d.getTestCallback(function(){
								doh.is(0, changes.length, "no onchange events yet");
								
								// test that focus is on top left cell
								var focus = dojo.global.dijit._curFocus;
								doh.t(focus, "something is focused");
								var imgNode = focus.getElementsByTagName("img")[0]
								doh.t(imgNode, "found image node");
								doh.is("#ffffff", imgNode.color, "focused on white");

								// test the highlight is initially on top left cell
								var highlighted = dojo.query(".dijitPaletteCellHighlight", big.domNode);
								doh.is(1, highlighted.length, "one focused node");
								doh.is("white", highlighted[0].title, "upper left is focused");
							}), 500);
							
							return d;
						}
					},

					{
						name: "arrow navigation",
						timeout: 10000,
						runTest: function(){
							var d = new doh.Deferred();

							// Move around some
							doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500, {});
							doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500, {});
							doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500, {});
							doh.robot.keyPress(dojo.keys.LEFT_ARROW, 500, {});
							
							// Focus should follow the current position for the benefit of screen readers.
							doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
								var focus = dojo.global.dijit._curFocus;
								doh.t(focus, "something is focused");
								
								var imgNode = focus.getElementsByTagName("img")[0]
								doh.t(imgNode, "found image node");

								doh.is("#ffc0cb", imgNode.color, "focused on right color");
							})), 1000);
							
							// Select the current value
							doh.robot.keyPress(dojo.keys.ENTER, 500, {});
							doh.robot.sequence(d.getTestCallback(dojo.hitch(this, function(){
								doh.is("#ffc0cb", big.attr("value"), "selected value");
								
								doh.is(1, changes.length, 'one onchange event');
								doh.is("#ffc0cb", changes[0], "correct value");
							})), 1000);

							return d;
						}
					},

					{
						name: "tab stops",
						timeout: 10000,
						runTest: function(){
							// After the navigation above, make sure that there's (still) exactly one
							// tab stop associated w/the color picker
							var d = new doh.Deferred();

							dojo.byId("beforeBig").focus();
							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.sequence(d.getTestErrback(function(){
								doh.is("white", dojo.global.dijit._curFocus.title, "tab into colorpalette, focus goes to white")
							}), 1000);

							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.sequence(d.getTestErrback(function(){
								doh.is("afterBig", dojo.global.dijit._curFocus.id, "another tab, went to input after ColorPalette")
							}), 1000);

							doh.robot.keyPress(dojo.keys.TAB, 500, {shift: true});
							doh.robot.sequence(d.getTestErrback(function(){
								doh.is("white", dojo.global.dijit._curFocus.title, "shift-tab back into colorpalette")
							}), 1000);

							doh.robot.keyPress(dojo.keys.TAB, 500, {shift: true});
							doh.robot.sequence(d.getTestCallback(function(){
								doh.is("beforeBig", dojo.global.dijit._curFocus.id, "another shift-tab, to input before ColorPalette")
							}), 1000);

							return d;
						}
					},
					{
						name: "small palette (keyboard)",
						timeout: 10000,
						runTest: function(){
							var d = new doh.Deferred();

							// go to small colorpalette
							dojo.byId("beforeSmall").focus();
							doh.robot.keyPress(dojo.keys.TAB, 500, {});

							// select a value
							doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500, {});
							doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500, {});
							doh.robot.keyPress(dojo.keys.SPACE, 500, {});

							doh.robot.sequence(d.getTestCallback(function(){
								var value = small.attr('value');
								doh.is("#ffff00", value);
							}), 1000);

							return d;
						}
					},

					{
						name: "small palette (mouse)",
						timeout: 10000,
						runTest: function(){
							var d = new doh.Deferred();

							// Testing nls too...
							var red = dojo.query("[title=rojo]", small.domNode);
							doh.is(1, red.length, "found rojo (red)");

							doh.robot.mouseMoveAt(red[0], 500);
							doh.robot.mouseClick({left: true}, 500);
							if(dojo.isMoz){
								// workaround robot bug where first mouse click doesn't happen occasionally :-(
								doh.robot.mouseClick({left: true}, 500);
							}

							doh.robot.sequence(d.getTestCallback(function(){
								// test that value set
								var value = small.attr('value');
								doh.is("#ff0000", value, "value");
								
								// test that focus also got set
								var focus = dojo.global.dijit._curFocus;
								doh.t(focus, "something is focused");
								var imgNode = focus.getElementsByTagName("img")[0]
								doh.t(imgNode, "found image node");
								doh.is("#ff0000", imgNode.color, "focused");
							}), 1000);

							return d;
						}
					}
				]);

				doh.run();
			});
		</script>
	</head>
</html>
